import { Component, OnInit } from '@angular/core';
import { TableCheckService } from 'src/app/utils/table-check.service';
import { ProductAttribute } from 'src/app/model/productAttr';
import { ProductAttrApiService } from 'src/app/api/product-attr-api.service';
import { HttpParams } from '@angular/common/http';
import { Router, ActivatedRoute } from '@angular/router';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'app-product-attr-list',
  templateUrl: './product-attr-list.component.html',
  styleUrls: ['./product-attr-list.component.less', '../../../../styles/container.css'],
  providers: [TableCheckService]
})
export class ProductAttrListComponent implements OnInit {

  batchOperate: string;
  operateOptions = [{ label: '删除', value: 'delete'}];
  pageIndex = 1;
  pageSize = 10;
  total = 0;
  tableLoading = false;
  attrList = new Array<ProductAttribute>();
  attrCate = '';
  cid: number;
  type: number;

  constructor(
    public tableCheck: TableCheckService,
    private attrApi: ProductAttrApiService,
    private route: ActivatedRoute,
    private router: Router,
    private modal: NzModalService,
    private message: NzMessageService,
  ) { }

  ngOnInit(): void {
    this.route.queryParams.subscribe(
      item => {
        this.attrCate = item.cname;
        this.cid = item.cid;
        this.type = item.type;
        this.fetchListFromServer(item.cid, item.type);
      }
    )

  }

  handleAdd() {
    const url = this.router.parseUrl('/pms/addProductAttr');
    url.queryParams = { 'cid': this.cid, 'type': this.type };
    this.router.navigateByUrl(url);
  }

  handleBatchOperate() {
    if (!this.tableCheck.setOfCheckedId || this.tableCheck.setOfCheckedId.size < 1) {
      this.message.error('请选择要操作的商品', { nzDuration: 1000, nzPauseOnHover: true });
      return;
    }
    if (!this.batchOperate) {
      this.message.error('请选择操作', { nzDuration: 1000 })
      return;
    }
    this.modal.confirm({
      nzTitle: '是否进行批量操作？',
      nzOkText: '确定',
      nzOkType: 'primary',
      nzOnOk:  this.applyatBchOperater,
      nzCancelText: '取消',
      nzMaskClosable: true,
    })
  }

  handlePageIndexChange() {
    this.fetchListFromServer(this.cid, this.type);
  }

  handlePageSizeChange() {
    this.fetchListFromServer(this.cid, this.type);
  }

  handleUpdate(id: number) {
    const url = this.router.parseUrl('/pms/updateProductAttr');
    url.queryParams = { 'id': id };
    this.router.navigateByUrl(url);
  }

  handleDelete(id: number) {
    this.modal.confirm({
      nzTitle: '确定删除此商品类型？',
      nzOkText: '确定',
      nzOkType: 'primary',
      nzOkDanger: true,
      nzOnOk: () => {
        this.attrApi.delete([id]).subscribe(
          respon => {
            this.message.success('删除成功');
            this.fetchListFromServer(this.cid, this.type);
          },
          err => {
            this.message.error('删除错误')
          }
        )
      },
      nzCancelText: '取消',
      nzMaskClosable: true,
    })
  }

  private applyatBchOperater = () => {
    this.attrApi.delete(Array.from(this.tableCheck.setOfCheckedId)).subscribe(
      respon => {
        this.message.success('删除成功');
        this.fetchListFromServer(this.cid, this.type);
      },
      err => {
        this.message.error('删除错误')
      }
    )
  }


  private fetchListFromServer(cid: number, type: number) {
    this.tableLoading = true;
    let params = new HttpParams({
      fromObject: {
        'pageNum': this.pageIndex.toString(),
        'pageSize': this.pageSize.toString(),
        'type': type.toString(),
      }
    });
    this.attrApi.listByCid(cid, params).subscribe(
      item => {
        this.tableLoading = false
        this.total = item.total;
        this.attrList = item.list;
        this.tableCheck.idList = item.list.map(attr => attr.id);
      }
    )
  }

}
